<template>
  <div class="Maximizing w-full flex justify-start flex-col items-center">
    <div class="w-full flex justify-center items-center">
      <h3 class="text-2xl font-bold mt-10 mb-10">
        {{ $t("plateForm.benefitsMax") }}
      </h3>
    </div>
    <div class="w-[80%] flex-row-container">
      <div
        v-for="(item, index) in items"
        class="flex-container"
        :class="`item${index}`"
        :key="item"
      >
        <div v-for="subItem in item" :key="item" class="flex-item">
          <div class="flex justify-start items-start">
            <img :src="getImgUrl(subItem.imgUrl)" alt="" width="20" />
            <p class="ml-4 font-medium">{{ subItem.title }}</p>
          </div>
          <p class="mt-4">{{ subItem.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const items = computed(() => {
  return [
    [
      {
        title: t("plateForm.resourceManage"),
        imgUrl: "../../../assets/images/Platform/benefits/1.png",
        text: t("plateForm.resourceManageText"),
      },
      {
        title: t("plateForm.resourceManage1"),
        imgUrl: "../../../assets/images/Platform/benefits/2.png",
        text: t("plateForm.resourceManageText1"),
      },
      {
        title: t("plateForm.resourceManage2"),
        imgUrl: "../../../assets/images/Platform/benefits/3.png",
        text: t("plateForm.resourceManageText2"),
      },
    ],
    [
      {
        title: t("plateForm.resourceManage3"),
        imgUrl: "../../../assets/images/Platform/benefits/4.png",
        text: t("plateForm.resourceManageText3"),
      },
      {
        title: t("plateForm.resourceManage4"),
        imgUrl: "../../../assets/images/Platform/benefits/5.png",
        text: t("plateForm.resourceManageText4"),
      },
    ],
    [
      {
        title: t("plateForm.resourceManage5"),
        imgUrl: "../../../assets/images/Platform/benefits/6.png",
        text: t("plateForm.resourceManageText5"),
      },
      {
        title: t("plateForm.resourceManage6"),
        imgUrl: "../../../assets/images/Platform/benefits/7.png",
        text: t("plateForm.resourceManageText6"),
      },
    ],
  ];
});

const getImgUrl = (url) => {
  return new URL(url, import.meta.url).href;
};
</script>
<style lang="scss" scoped>
.Maximizing {
  height: 750px;
  background: url("@/assets/images/platform/bg2.png") no-repeat center center;
  background-size: cover;
  background-position: center center;
  .flex-row-container {
    display: flex;
    flex-direction: column;
  }

  .flex-container {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
  }

  .flex-item {
    flex: 1 1 30%;
    text-align: left;
    border: 1px solid #ddd;
    padding: 20px;
    box-sizing: border-box;
    margin: 10px;
  }
  .item0 .flex-item {
    height: 150px;
    border-radius: 15px;
    border: none;
    background: url("@/assets/images/platform/benefits/bg2.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .item1 .flex-item,
  .item2 .flex-item {
    flex: 1;
    height: 150px;
    border-radius: 15px;
    border: none;
    background: url("@/assets/images/platform/benefits/bg1.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
}
</style>
